<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2> -->
        <school></school>
        <hr>
        <student></student>
        
        <!-- <h2>学生名称：{{studentName}}</h2>
        <h2>学生年龄：{{age}}</h2> -->
    </div>
   <script type="text/javascript">
     const school= Vue.extend({
        data() {
            return {
                schoolName:'学校名称', 
                address : '学校地址'
            }
        },
        methods: {
            showSName() {
                alert(this.schoolName)
            }  
        },
        template: `
        <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{address}}</h2>
            <button @click="showSName">点我提示学校名</button>
        </div>`
    })   
    const student= Vue.extend({
        data() {
            return {
                studentName:'学生姓名',
                age:18
            }
        },
        template: `
        <div>
            <h2>学生名称：{{studentName}}</h2>
            <h2>学生年龄：{{age}}</h2>
        </div>`
    })
    new Vue({
        el:'#root',
        // 组件注册
        components: {
            school,
            student
        }
    })
   </script>
</body>
</html>